<template>
  <div class="table_control_main_box">
    <div class="left_box">
      <div class="left_box_content">
        <div class="config_common">
          <span>配置：</span>
        </div>
        <div class="config_common">
          <div>
            <span>查询条件配置</span>
            <el-icon @click="addFields"><Plus /></el-icon>
          </div>
          <div class="search_content">
            <div
              class="search_single"
              v-for="(item, index) in searchContentList"
              :key="index"
            >
              <el-input   class="search_common"
                v-model="allValuesParams[item.filedNameCN]"
                placeholder="字段名"
              />
              <el-select   class="search_common search_common_left"
                v-model="allValuesParams[item.searchType]"
                placeholder="类型"
              >
                <el-option
                  :label="item.name"
                  :value="item.code"
                  v-for="(item, index) in filedTypeList"
                  :key="index"
                ></el-option>
              </el-select>
              <el-input  class="search_common search_common_left"
                v-model="allValuesParams[item.searchValue]"
                v-if="allValuesParams[item.searchType]==='select'"
                placeholder="字段值"
              />
              <el-input    class="search_common search_common_left"
                v-model="allValuesParams[item.filedNameEN]"
                placeholder="编码"
              />
            </div>
          </div>
        </div>
        <div class="config_common">
          <div>
            <span>查询按钮配置</span>
          </div>
          <div style="margin-top: 10px;">
            <el-checkbox v-model="cxButtonCheck" label="查询" size="default" border />
            <el-checkbox v-model="sxButtonCheck" label="刷新" size="default" border />
          </div>
        </div>
        <div class="config_common">
          <div>
            <span>表格按钮配置</span>
          </div>
          <div style="margin-top: 10px;">
            <el-checkbox v-model="tableTopAddCheck" label="新增" size="default" border />
            <el-checkbox v-model="tableTopDeleteCheck" label="删除" size="default" border />
          </div>
        </div>
        <div class="config_common">
          <div>
            <span>表头字段配置</span>
            <el-icon @click="adddTableShowFiled"><Plus /></el-icon>
          </div>
          <div  class="table_header_descript">
            <div class="small_text">字段名</div>
            <div class="small_text small_text_left">字段Code</div>
            <div class="small_text small_text_left">列宽</div>
          </div>
          <div class="search_content">
            <div
              class="search_single"
              v-for="(item, index) in tableHeaderList"
              :key="index"
            >
              <el-input   class="search_common"
                v-model="allValuesParams[item.tableHeaderName]"
                placeholder="字段名"
              />
              <el-input  class="search_common search_common_left"
                v-model="allValuesParams[item.tableHeaderCode]"
                placeholder="字段值"
              />
              <el-input    class="search_common search_common_left"
                v-model="allValuesParams[item.tableHeaderWidth]"
                placeholder="编码"
              />
            </div>
          </div>
        </div>
        <div class="config_common">
          <div>
            <span>表格操作配置</span>
          </div>
          <div style="margin-top: 10px;">
            <el-checkbox v-model="tableRightDetailCheck" label="详情" size="default" border />
            <el-checkbox v-model="tableRightChangeCheck" label="修改" size="default" border />
            <el-checkbox v-model="tableRightDeleteCheck" label="删除" size="default" border />
          </div>
        </div>
        <div class="config_common">
          <span>公共样式配置</span>
        </div>
      </div>
    </div>
    <div class="right_box"></div>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from "vue";
//定义ts 接口类型
interface sinJson {
  [key: string]: any; //动态添加属性
}
//添加字段的列表的数据扩展
const searchContentList = ref([
  {
    "filedNameCN": "filedNameCN2023",
    "searchType": "searchTyp2023",
    "searchValue": "searchValeu2023",
    "filedNameEN": "filedNameEN2023",
  },
]);
const tableHeaderList = ref([
  {
    "tableHeaderName": "tableHeaderName2023",
    "tableHeaderCode": "tableHeaderCode2023",
    "tableHeaderWidth": "tableHeaderWidth2023",
  }
]);
const allValuesParams: sinJson = ref({
  "filedNameCN2023": "",
  "searchTyp2023": "input",
  "searchValeu2023": "",
  "filedNameEN2023": "",
  "tableHeaderName2023":"",
  "tableHeaderCode":"",
  "tableHeaderWidth2023":""
});
const filedTypeList = ref([
  {
    name: "input",
    code: "input",
  },
  {
    name: "datetiem",
    code: "datetiem",
  },
  {
    name: "select",
    code: "select",
  }
]);
const fileName = ref("");
//查询按钮
const  cxButtonCheck=ref(false);
//刷新按钮
const  sxButtonCheck=ref(false);
//表格顶部的新增
const  tableTopAddCheck=ref(false);
//表格顶部的删除
const  tableTopDeleteCheck=ref(false);
//表格右边的查询
const  tableRightDetailCheck=ref(false);
//表格右边的修改
const  tableRightChangeCheck=ref(false);
//表格右边的查询
const  tableRightDeleteCheck=ref(false);
//添加查询字段
const adddTableShowFiled = () => {
  const time = new Date().getTime();
  const singleJson = {
    "tableHeaderName": "tableHeaderName"+time,
    "tableHeaderCode": "tableHeaderCode"+time,
    "tableHeaderWidth": "tableHeaderWidth"+time,
  };
  tableHeaderList.value.push(singleJson);
  Object.entries(singleJson).forEach(([k, v]) => {
    allValuesParams.value[v] = "";
    if(k.indexOf('searchTyp')>=0){
        allValuesParams.value[v] = "input";
    }
  });
};
// //添加查询按钮
// const addButton = () => {};
// //添加表格的顶部的按钮
// const addTableButton = () => {};
//添加表格的头部展示字段
const addFields  = () => {
    const time = new Date().getTime();
  const singleJson = {
    filedNameCN: "filedNameCN" + time,
    searchType: "searchTyp" + time,
    searchValue: "searchValeu" + time,
    filedNameEN: "filedNameEN" + time,
  };
  searchContentList.value.push(singleJson);
  Object.entries(singleJson).forEach(([k, v]) => {
    allValuesParams.value[v] = "";
    if(k.indexOf('searchTyp')>=0){
        allValuesParams.value[v] = "input";
    }
  });
};
//添加表格的右侧的操作按钮
const addTableRightOptionButton = () => {};
</script>
<style lang="scss" scoped>
.table_control_main_box {
  width: 100%;
  height: 100%;
  display: flex;
  .left_box {
    margin-top: 10px;
    margin-left: 5px;
    width: 380px;
    height: calc(100% - 20px);
    background-color: rgb(63, 66, 64);
    border-radius: 10px;
    color: aquamarine;
    display: flex;
    flex-direction: column;
    .config_common {
      margin-top: 10px;
      margin-left: 0px;
      display: flex;
      flex-direction: column;
      span {
        color: #ffffff;
        height: 25px;
        line-height: 25px;
      }
    }
    .search_single{
        display: flex;
        margin-top: 10px;
    }
    .search_common{
       width: 80px ;
    }
    .search_common_left {
        margin-left: 5px;
    }
    .left_box_content {
      margin-left: 20px;
    }
    .search_content{
        max-height: 200px;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .table_header_descript{
       display: flex;
       .small_text{
        width: 80px;
       }
       .small_text_left{
        margin-left: 5px;
       }
    }
    


  }
  .right_box {
    width: calc(100% - 380px);
    height: 100%;
  }

   :deep(.el-icon) {
      cursor: pointer;
      margin-left: 10px;
    }
}
</style>
<style>
    .el-select-dropdown{
        width: 80px !important;
    }
    .el-select-dropdown__item{
        padding: 0 !important;
        margin-left: 10px;
    }
</style>